<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重庆大学文渊阁读书协会 - 赛博文学自留地</title>
    <style>
        :root {
            --neon-cyan: #00ffff;
            --neon-pink: #ff006e;
            --neon-purple: #8b00ff;
            --deep-black: #0a0a0a;
            --glass-white: rgba(255, 255, 255, 0.05);
            --glass-border: rgba(255, 255, 255, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
            background: var(--deep-black);
            color: #fff;
            overflow-x: hidden;
            cursor: none;
        }

        /* 自定义光标样式 */
        .cursor {
            position: fixed;
            width: 20px;
            height: 20px;
            border: 2px solid var(--neon-cyan);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: difference;
            transition: transform 0.2s ease;
        }

        .cursor-follower {
            position: fixed;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 9998;
            transition: transform 0.3s ease;
        }

        .cursor.hover {
            transform: scale(1.5);
            background-color: var(--neon-pink);
            border-color: var(--neon-pink);
        }

        .cursor-follower.hover {
            transform: scale(1.2);
            background: radial-gradient(circle, rgba(255, 0, 110, 0.3) 0%, transparent 70%);
        }

        .cursor.click {
            transform: scale(0.8);
            background-color: var(--neon-purple);
            border-color: var(--neon-purple);
        }

        #matrix-rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }

        /* 导航栏样式 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(10, 10, 10, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--glass-border);
            z-index: 1000;
            padding: 15px 0;
            transition: all 0.3s ease;
        }

        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        .navbar-brand {
            font-size: 1.5rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
        }

        .navbar-nav {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        .navbar-nav a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
        }

        .navbar-nav a:hover {
            color: var(--neon-cyan);
        }

        .navbar-nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--neon-cyan);
            transition: width 0.3s ease;
        }

        .navbar-nav a:hover::after {
            width: 100%;
        }

        /* 主内容区域 */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
            z-index: 1;
        }

        .hero-content {
            text-align: center;
            z-index: 2;
            position: relative;
        }

        .main-title {
            font-size: 12vw;
            font-weight: 900;
            background: linear-gradient(45deg, var(--neon-cyan), var(--neon-pink), var(--neon-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: title-pulse 3s ease-in-out infinite;
        }

        @keyframes title-pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.02);
            }
        }

        .subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 300;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            opacity: 0;
            animation: fade-in-up 1s ease-out 0.5s forwards;
        }

        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .philosophy-section {
            padding: 100px 20px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 100%);
        }

        .philosophy-text {
            max-width: 800px;
            margin: 0 auto;
            font-size: 1.2rem;
            line-height: 2;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
        }

        .activities-showcase {
            padding: 80px 20px;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 50px;
            background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .activity-grid {
            display: grid;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .activity-card {
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .activity-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
            border-color: var(--neon-cyan);
        }

        .card-number {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 3rem;
            font-weight: 900;
            color: rgba(255, 255, 255, 0.1);
        }

        .card-title {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--neon-cyan);
        }

        .card-description {
            font-size: 1rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
        }

        .card-link {
            display: inline-block;
            color: var(--neon-pink);
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .card-link:hover {
            text-shadow: 0 0 8px var(--neon-pink);
        }

        .departments-section {
            padding: 80px 20px;
            background: linear-gradient(135deg, var(--deep-black) 0%, #2a2a2a 100%);
        }

        .dept-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 40px;
        }

        .dept-item {
            width: 280px;
            height: 280px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s ease;
            cursor: pointer;
        }

        .dept-item:hover {
            transform: rotateY(180deg);
        }

        .dept-front, .dept-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 25px;
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
        }

        .dept-back {
            transform: rotateY(180deg);
            background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
            border: none;
        }

        .dept-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .dept-name {
            font-size: 1.4rem;
            font-weight: 600;
            color: var(--neon-cyan);
        }

        .dept-back .dept-name {
            color: #fff;
            margin-bottom: 15px;
        }

        .dept-desc {
            color: rgba(255, 255, 255, 0.9);
            text-align: center;
            line-height: 1.6;
        }

        .learn-more-btn {
            margin-top: 15px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 16px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .learn-more-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 8px white;
        }

        /* 部门详情页样式 */
        .dept-detail-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2000;
            overflow-y: auto;
            padding: 20px;
        }

        .dept-detail-content {
            max-width: 1000px;
            margin: 80px auto;
            background: var(--deep-black);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 0 50px rgba(0, 255, 255, 0.3);
            border: 1px solid var(--neon-cyan);
        }

        .dept-detail-header {
            height: 300px;
            position: relative;
            overflow: hidden;
        }

        .dept-detail-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.7);
        }

        .dept-detail-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
            display: flex;
            align-items: flex-end;
            padding: 30px;
        }

        .dept-detail-title {
            font-size: 3rem;
            font-weight: 900;
            background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }

        .dept-detail-body {
            padding: 40px;
        }

        .dept-detail-description {
            font-size: 1.2rem;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
        }

        .dept-detail-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .feature-item {
            background: var(--glass-white);
            border: 1px solid var(--glass-border);
            border-radius: 10px;
            padding: 20px;
            transition: all 0.3s ease;
        }

        .feature-item:hover {
            border-color: var(--neon-cyan);
            transform: translateY(-5px);
        }

        .feature-title {
            font-size: 1.2rem;
            color: var(--neon-cyan);
            margin-bottom: 10px;
        }

        .feature-desc {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
        }

        .close-detail {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid var(--neon-cyan);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--neon-cyan);
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .close-detail:hover {
            background: var(--neon-cyan);
            color: var(--deep-black);
        }

        .join-cta {
            padding: 100px 20px;
            text-align: center;
            background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1) 0%, transparent 70%);
        }

        .cta-title {
            font-size: 2.8rem;
            font-weight: 900;
            margin-bottom: 20px;
            background: linear-gradient(45deg, var(--neon-cyan), var(--neon-pink));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: glitch-text 2s infinite;
        }

        @keyframes glitch-text {
            0%, 100% {
                text-shadow: none;
            }
            25% {
                text-shadow: -2px 0 var(--neon-pink), 2px 0 var(--neon-cyan);
            }
            75% {
                text-shadow: 2px 0 var(--neon-pink), -2px 0 var(--neon-cyan);
            }
        }

        .cta-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
            letter-spacing: 0.1em;
            line-height: 1.6;
        }

        .join-button {
            display: inline-block;
            padding: 16px 50px;
            background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple));
            color: #fff;
            text-decoration: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
        }

        .join-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0, 255, 255, 0.5);
        }

        .wechat-info {
            margin-top: 30px;
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .wechat-id {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 16px;
            border: 1px solid var(--neon-cyan);
            border-radius: 30px;
            color: var(--neon-cyan);
            transition: all 0.3s ease;
        }

        .wechat-id:hover {
            background: var(--neon-cyan);
            color: var(--deep-black);
        }

        /* 滚动动画 */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 小屏优化 */
        @media (min-width: 600px) {
            .activity-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .main-title {
                font-size: 5rem;
            }
        }

        /* 移动设备优化 */
        @media (max-width: 768px) {
            .cursor, .cursor-follower {
                display: none; /* 在移动设备上隐藏光标 */
            }
            
            body {
                cursor: auto;
            }
            
            .main-title {
                font-size: 3.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .dept-item {
                width: 250px;
                height: 250px;
            }
            
            .cta-title {
                font-size: 2rem;
            }
            
            .join-button {
                padding: 14px 40px;
                font-size: 1rem;
            }
            
            .activity-grid {
                grid-template-columns: 1fr;
            }
            
            .navbar-nav {
                gap: 15px;
            }
            
            .navbar-nav a {
                font-size: 0.9rem;
            }
            
            .dept-detail-title {
                font-size: 2rem;
            }
            
            .dept-detail-body {
                padding: 20px;
            }
            
            .dept-detail-features {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 自定义光标 -->
    <div class="cursor"></div>
    <div class="cursor-follower"></div>

    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="navbar-brand">文渊阁</a>
            <ul class="navbar-nav">
                <li><a href="#home">首页</a></li>
                <li><a href="#philosophy">理念</a></li>
                <li><a href="#activities">活动</a></li>
                <li><a href="#departments">部门</a></li>
                <li><a href="#join">加入我们</a></li>
            </ul>
        </div>
    </nav>

    <!-- 矩阵雨背景 -->
    <canvas id="matrix-rain"></canvas>

    <!-- 主内容区域 -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h1 class="main-title">文渊阁</h1>
            <p class="subtitle">赛博空间的哲学栖息地</p>
        </div>
    </section>

    <section class="philosophy-section" id="philosophy">
        <div class="philosophy-text fade-in">
            当纸质书成为生活的不必要品，碎片化的信息构成了人与人交往的互联世界，
            线下小规模的读书协会存在是否还有意义？当经费不足以支撑我们精神梦想的时候，
            我们的社团成为了这样的一个赛博社团——一群"小众"的学生，通过大众的科技聚集在一起，
            重建精神家园的收容所。
        </div>
    </section>

    <section class="activities-showcase" id="activities">
        <h2 class="section-title fade-in">RECENT ACTIVITIES</h2>
        <div class="activity-grid">
            <div class="activity-card fade-in">
                <div class="card-number">02</div>
                <h3 class="card-title">博雅·读书·生活系列活动（二）</h3>
                <p class="card-description">在赛博朋克的世界里，我们寻找着人文与科技的平衡点。让阅读成为生活的防火墙，抵御信息的洪流。</p>
                <a href="https://mp.weixin.qq.com/s/ZMoOvZ2y837wuklNwUXABQ" class="card-link" target="_blank">点此查看活动详情 →</a>
            </div>
            <div class="activity-card fade-in">
                <div class="card-number">01</div>
                <h3 class="card-title">博雅·读书·生活系列活动（一）</h3>
                <p class="card-description">当二进制遇见诗经，当算法碰撞哲学。在这里，我们用代码编译诗意，用数据流传承文明。</p>
                <a href="https://mp.weixin.qq.com/s/o3Ty5l7M5iFOn6yUCw2sPQ" class="card-link" target="_blank">点此查看活动详情 →</a>
            </div>
        </div>
    </section>

    <section class="departments-section" id="departments">
        <h2 class="section-title fade-in">DEPARTMENTS</h2>
        <div class="dept-container">
            <div class="dept-item fade-in" data-dept="propaganda">
                <div class="dept-front">
                    <div class="dept-icon">📡</div>
                    <h3 class="dept-name">宣传部</h3>
                </div>
                <div class="dept-back">
                    <h3 class="dept-name">宣传部</h3>
                    <p class="dept-desc">在信息的海洋中，我们是灯塔的守护者。用创意的代码，编译思想的火花。</p>
                    <button class="learn-more-btn">了解更多 →</button>
                </div>
            </div>
            <div class="dept-item fade-in" data-dept="organization">
                <div class="dept-front">
                    <div class="dept-icon">⚙️</div>
                    <h3 class="dept-name">组织部</h3>
                </div>
                <div class="dept-back">
                    <h3 class="dept-name">组织部</h3>
                    <p class="dept-desc">协调虚拟与现实的接口，管理人文与科技的融合。让每一次活动都成为一次思想的升级。</p>
                    <button class="learn-more-btn">了解更多 →</button>
                </div>
            </div>
            <div class="dept-item fade-in" data-dept="learning">
                <div class="dept-front">
                    <div class="dept-icon">🔮</div>
                    <h3 class="dept-name">学习部</h3>
                </div>
                <div class="dept-back">
                    <h3 class="dept-name">学习部</h3>
                    <p class="dept-desc">在知识的矩阵中探索，让每一本书都成为通往新世界的端口。构建思维的神经网络。</p>
                    <button class="learn-more-btn">了解更多 →</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 部门详情页 -->
    <div id="propaganda-detail" class="dept-detail-page">
        <div class="dept-detail-content">
            <div class="dept-detail-header">
                <img src="" alt="宣传部" class="dept-detail-image" id="propaganda-image">
                <div class="dept-detail-overlay">
                    <div>
                        <h2 class="dept-detail-title">宣传部</h2>
                        <p class="subtitle">信息海洋中的灯塔守护者</p>
                    </div>
                </div>
                <div class="close-detail">×</div>
            </div>
            <div class="dept-detail-body">
                <p class="dept-detail-description">
                    我们热衷于传播知识、扩散梦想，让热爱在校园发光。在信息的洪流中，我们搭建起思想的桥梁，用创意的代码编译思想的火花，让每一个声音都能被听见，每一个梦想都能被看见。
                </p>
                <div class="dept-detail-features">
                    <div class="feature-item">
                        <h3 class="feature-title">创意设计</h3>
                        <p class="feature-desc">运用赛博美学设计海报、视频和数字内容，让每一次宣传都成为视觉盛宴。</p>
                    </div>
                    <div class="feature-item">
                        <h3 class="feature-title">数字传播</h3>
                        <p class="feature-desc">通过社交媒体、公众号等数字渠道，将知识与思想传播到校园的每一个角落。</p>
                    </div>
                    <div class="feature-item">
                        <h3 class="feature-title">活动记录</h3>
                        <p class="feature-desc">用镜头和文字记录每一次活动的精彩瞬间，构建文渊阁的数字记忆库。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="organization-detail" class="dept-detail-page">
        <div class="dept-detail-content">
            <div class="dept-detail-header">
                <img src="" alt="组织部" class="dept-detail-image" id="organization-image">
                <div class="dept-detail-overlay">
                    <div>
                        <h2 class="dept-detail-title">组织部</h2>
                        <p class="subtitle">梦想与行动的构建者</p>
                    </div>
                </div>
                <div class="close-detail">×</div>
            </div>
            <div class="dept-detail-body">
                <p class="dept-detail-description">
                    我们擅长构建梦想并付诸行动，不浪费点滴青春时光。作为文渊阁的架构师，我们协调虚拟与现实的接口，管理人文与科技的融合，让每一次活动都成为一次思想的升级。
                </p>
                <div class="dept-detail-features">
                    <div class="feature-item">
                        <h3 class="feature-title">活动策划</h3>
                        <p class="feature-desc">从概念到执行，我们设计并组织富有创意的读书活动与文化交流项目。</p>
                    </div>
                    <div class="feature-item">
                        <h3 class="feature-title">团队协调</h3>
                        <p class="feature-desc">协调各部门工作，确保每一次活动都能高效、顺利地开展。</p>
                    </div>
                    <div class="feature-item">
                        <h3 class="feature-title">资源管理</h3>
                        <p class="feature-desc">管理社团资源，优化配置，让有限的资源发挥最大的价值。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="learning-detail" class="dept-detail-page">
        <div class="dept-detail-content">
            <div class="dept-detail-header">
                <img src="" alt="学习部" class="dept-detail-image" id="learning-image">
                <div class="dept-detail-overlay">
                    <div>
                        <h2 class="dept-detail-title">学习部</h2>
                        <p class="subtitle">知识的求索者</p>
                    </div>
                </div>
                <div class="close-detail">×</div>
            </div>
            <div class="dept-detail-body">
                <p class="dept-detail-description">
                    我们是知识的求索者，搭建虚拟和现实之间的桥梁。在知识的矩阵中探索，让每一本书都成为通往新世界的端口，构建思维的神经网络，让阅读成为连接过去与未来的纽带。
                </p>
                <div class="dept-detail-features">
                    <div class="feature-item">
                        <h3 class="feature-title">读书会组织</h3>
                        <p class="feature-desc">策划并主持各类主题读书会，促进思想交流与知识共享。</p>
                    </div>
                    <div class="feature-item">
                        <h3 class="feature-title">知识分享</h3>
                        <p class="feature-desc">整理并分享阅读心得、书单推荐，构建文渊阁的知识库。</p>
                    </div>
                    <div class="feature-item">
                        <h3 class="feature-title">学习资源</h3>
                        <p class="feature-desc">收集整理优质学习资源，为成员提供丰富的阅读与学习材料。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="join-cta" id="join">
        <h2 class="cta-title fade-in">JOIN THE RESISTANCE</h2>
        <p class="cta-subtitle fade-in">
            发现我们<br>
            找到我们<br>
            加入我们
        </p>
        <!-- QQ 群链接（新标签打开） -->
        <a href="https://qun.qq.com/universal-share/share?ac=1&authKey=9Nxuvkk0DC7JrmXXHfN59qwCWHJXnGl9pXV5meYmu319hATTYfrMEsL3LTFZgiED&busi_data=eyJncm91cENvZGUiOiI3NjE2MTEyNjMiLCJ0b2tlbiI6IjlUN2lyeWp5OThOSjVZdy8vUHZGM1RQSk1tVDZES0EyZ2owUlBSNE01bzZLaGNQMWlDak1TQURnZEcrL3JQRzkiLCJ1aW4iOiIxOTY5NTg5MDAxIn0%3D&data=tPSLk8XoipFVVZCr6aycTPs0LypmxqN-55DSr0K9_xKRynp6xOHTmwQ50Ve3vqEaK_KRFgojjtKdvibDme5Ucg&svctype=4&tempid=h5_group_info"
           class="join-button fade-in" target="_blank">2025 纳新 QQ 群：761611263</a>
        <div class="wechat-info fade-in">
            <p>关注我们的意识传输节点</p>
            <span class="wechat-id">官微：重大文渊阁</span>
        </div>
    </section>

    <script>
        // 页面加载时设置本地图片
        window.addEventListener('load', function() {
            // 设置本地图片路径
            document.getElementById('propaganda-image').src = './宣传部图片.jpg';
            document.getElementById('organization-image').src = './组织部图片.jpg';
            document.getElementById('learning-image').src = './学习部图片.jpg';
        });

        // 光标逻辑
        const cursor = document.querySelector('.cursor');
        const cursorFollower = document.querySelector('.cursor-follower');
        
        // 鼠标移动事件
        document.addEventListener('mousemove', e => {
            cursor.style.left = e.clientX + 'px';
            cursor.style.top = e.clientY + 'px';
            
            setTimeout(() => {
                cursorFollower.style.left = e.clientX + 'px';
                cursorFollower.style.top = e.clientY + 'px';
            }, 100);
        });
        
        // 鼠标悬停效果
        const hoverElements = document.querySelectorAll('a, button, .activity-card, .dept-item, .join-button, .feature-item');
        
        hoverElements.forEach(element => {
            element.addEventListener('mouseenter', () => {
                cursor.classList.add('hover');
                cursorFollower.classList.add('hover');
            });
            
            element.addEventListener('mouseleave', () => {
                cursor.classList.remove('hover');
                cursorFollower.classList.remove('hover');
            });
        });
        
        // 鼠标点击效果
        document.addEventListener('mousedown', () => {
            cursor.classList.add('click');
        });
        
        document.addEventListener('mouseup', () => {
            cursor.classList.remove('click');
        });
        
        // 矩阵雨效果
        const canvas = document.getElementById('matrix-rain');
        const ctx = canvas.getContext('2d');
        
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        const matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
        const matrixArray = matrix.split("");
        const fontSize = 10;
        const columns = canvas.width / fontSize;
        const drops = [];
        
        for (let x = 0; x < columns; x++) {
            drops[x] = 1;
        }
        
        function drawMatrix() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#00ff41';
            ctx.font = fontSize + 'px monospace';
            
            for (let i = 0; i < drops.length; i++) {
                const text = matrixArray[Math.floor(Math.random() * matrixArray.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                
                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                
                drops[i]++;
            }
        }
        
        setInterval(drawMatrix, 35);
        
        // 滚动动画
        const observer = new IntersectionObserver(entries => {
            entries.forEach(e => {
                if (e.isIntersecting) {
                    e.target.classList.add('visible');
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        });
        
        document.querySelectorAll('.fade-in').forEach(el => {
            observer.observe(el);
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.style.background = 'rgba(10, 10, 10, 0.95)';
            } else {
                navbar.style.background = 'rgba(10, 10, 10, 0.9)';
            }
        });
        
        // 部门详情页功能
        const deptItems = document.querySelectorAll('.dept-item');
        const learnMoreBtns = document.querySelectorAll('.learn-more-btn');
        const detailPages = document.querySelectorAll('.dept-detail-page');
        const closeButtons = document.querySelectorAll('.close-detail');
        
        // 为"了解更多"按钮添加点击事件
        learnMoreBtns.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation(); // 防止事件冒泡
                const deptItem = btn.closest('.dept-item');
                const deptType = deptItem.getAttribute('data-dept');
                const detailPage = document.getElementById(`${deptType}-detail`);
                
                // 显示对应的详情页
                detailPage.style.display = 'block';
                document.body.style.overflow = 'hidden';
            });
        });
        
        // 为部门卡片本身添加点击事件（点击卡片任意位置翻转）
        deptItems.forEach(item => {
            item.addEventListener('click', (e) => {
                // 只有当点击的不是"了解更多"按钮时才翻转卡片
                if (!e.target.classList.contains('learn-more-btn')) {
                    item.classList.toggle('flipped');
                    if (item.style.transform === 'rotateY(180deg)') {
                        item.style.transform = 'rotateY(0deg)';
                    } else {
                        item.style.transform = 'rotateY(180deg)';
                    }
                }
            });
        });
        
        closeButtons.forEach(button => {
            button.addEventListener('click', () => {
                detailPages.forEach(page => {
                    page.style.display = 'none';
                });
                document.body.style.overflow = 'auto';
            });
        });
        
        // 点击详情页背景关闭
        detailPages.forEach(page => {
            page.addEventListener('click', (e) => {
                if (e.target === page) {
                    page.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });
        });
    </script>
</body>
</html>